#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<style>

</style>
#end

#define content()
<div class="layui-fluid">
    <form id="searchForm" class="layui-form x-center" action="">
            <div class="layui-form-item" align="left">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 120px">预计金额范围：</label>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input name="minAmount" placeholder="￥" autocomplete="off" class="layui-input" type="number">
                        <div id="digitsTip"></div>
                    </div>
                    <div class="layui-form-mid">-</div>
                    <div class="layui-input-inline" style="width: 120px;">
                        <input name="maxAmount" placeholder="￥" autocomplete="off" class="layui-input" type="number">
                    </div>
                    <div class="layui-input-inline" style="width : 80px">
                        <button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>
                        </button>
                    </div>
                </div>
            </div>
    </form>

    <div class="layui-row">
        <table id="dateTable" lay-filter="dateTable"></table>
    </div>
</div>

<script type="text/html" id="barOption">


    #[[
    {{#  if(d.remark == "待确认"){ }}
    ]]#
    #shiroHasPermission('/app/projectUndertake/agency')
    <a class="layui-btn layui-btn-xs">待确认</a>
    #end
    #shiroHasPermission('/app/projectUndertake/see')
    <a class="layui-btn layui-btn-xs" lay-event="see">查看详细资料</a>
    #end
    #[[
    {{#  } }}
    ]]#

    #[[
    {{#  if(d.remark == "已拒绝"){ }}
    ]]#
    #shiroHasPermission('/app/projectUndertake/agency')
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="agency">重新申请</a>
    #end
    #shiroHasPermission('/app/projectUndertake/see')
    <a class="layui-btn layui-btn-xs" lay-event="see">查看详细资料</a>
    #end
    #[[
    {{#  } }}
    ]]#

    #[[
    {{#  if(d.remark == "已同意"){ }}
    ]]#
    #shiroHasPermission('/app/projectUndertake/agency')
    <a class="layui-btn layui-btn-warm layui-btn-xs">已同意</a>
    #end
    #shiroHasPermission('/app/projectUndertake/see')
    <a class="layui-btn layui-btn-xs" lay-event="see">查看详细资料</a>
    #end
    #[[
    {{#  } }}
    ]]#


    #[[
    {{#  if(d.remark == "未承接"){ }}
    ]]#
    #shiroHasPermission('/app/projectUndertake/agency')
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="agency">申请介入</a>
    #end
    #shiroHasPermission('/app/projectUndertake/see')
    <a class="layui-btn layui-btn-xs" lay-event="see">查看项目详情</a>
    #end
    #[[
    {{#  } }}
    ]]#

    #[[
    {{#  if(d.remark == "已被承接"){ }}
    ]]#
    #shiroHasPermission('/app/projectUndertake/agency')
    <a class="layui-btn layui-btn-danger layui-btn-xs">无法承接</a>
    #end
    #[[
    {{#  } }}
    ]]#

</script>
#end

#define js()
<script type="text/javascript">
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table
            , $ = layui.jquery
            , form = layui.form;
        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , id: 'dateTable'
            , even: true //开启隔行背景
            , size: 'sm' //小尺寸的表格
            , height: 'full-120'    //容器高度
            , contentType: 'application/json; charset=UTF-8'
            , cols: [[                  //标题栏
                {field: 'name', title: '项目名称', minWidth: 100, sort: true}
                , {field: 'buildOrgName', title: '立项机构', minWidth: 100}
                , {field: 'amount', title: '预计金额(单位：元)', width: 160, sort: true, templet: '#tplMoney'}
                , {field: 'site', title: '地址', minWidth: 100}
                , {field: 'brief', title: '简介', minWidth: 100}
                , {field: 'createTime', title: '创建时间', width: 150, sort: true}
                , {field: 'remark', title: '状态', width: 120}
                , {fixed: 'right', title: '操作', minWidth: 200, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , url: '#(ctxPath)/app/projectUndertake/projectList'
            , method: 'get'
            , request: {
                pageName: 'pageNumber' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , page: true
            , limits: [30, 60, 90, 150, 300]
            , limit: 30 //默认采用30
            , loading: true
            , done: function (res, curr, count) {
            }
        });

        table.on('tool(dateTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'see') {
                pop_show('查看项目资料', '#(ctxPath)/app/projectUndertake/see?id=' + data.id, '1200', '750', function () {
                });
            } else if (obj.event === 'agency') {
                var btn = obj.tr[0].lastElementChild.lastElementChild.lastElementChild;
                $(btn).addClass("layui-disabled").removeClass("layui-btn-danger").addClass("layui-btn-normal")
                    .removeAttr("lay-event").text("已申请");
                $.post("#(ctxPath)/app/projectUndertake/agency", {id: data.id}, function (msg) {
                    layer.msg(msg.msg);
                    reloadTable();
                });
            }
        });

        form.on('submit(search)', function (data) {
            console.log(data);
            reloadTable(data.field.minAmount, data.field.maxAmount);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        var reloadTable = function (minAmount, maxAmount) {
            table.reload('dateTable', {
                url: '#(ctxPath)/app/projectUndertake/projectList'
                , where: {
                    minAmount: minAmount,
                    maxAmount: maxAmount
                } //设定异步数据接口的额外参数
            });
        };
    });

    $('#minAmount').on('input propertychange mousemove', function() {
        var data = $('#minAmount').val();
        var str = digitsConversion(data);
        var bid = parseInt(Math.random()*100000);
        $("#digitsTip").html('<div class="docBubble" id="btip'+bid+'"><i class="triangle-t"></i><div class="tl"><div class="inner"><div class="cont"></div></div></div><div class="tr"></div><div class="bl"></div></div>');
        var $btip = $("#btip"+bid);
        var offset,h ,w ;
        var timer;
        clearInterval(timer);
        offset = $(this).offset();
        h = $(this).height();
        w = $(this).width();
        $(".cont").html(str);
        $(".triangle-t").css('left',26);
        $btip.css({ "left":offset.left-330  ,  "top":offset.top+h-60  }).show();
    });

    $('#minAmount').live("mousemove",function(){
        clearInterval(window.timer);
        $("#digitsTip").show();
    });

    $('#minAmount').live("mouseout",function(){
        $("#digitsTip").hide();
    });

    $('#maxAmount').on('input propertychange mousemove', function() {
        var data = $('#minAmount').val();
        var str = digitsConversion(data);
        var bid = parseInt(Math.random()*100000);
        $("#digitsTip").html('<div class="docBubble" id="btip'+bid+'"><i class="triangle-t"></i><div class="tl"><div class="inner"><div class="cont"></div></div></div><div class="tr"></div><div class="bl"></div></div>');
        var $btip = $("#btip"+bid);
        var offset,h ,w ;
        var timer;
        clearInterval(timer);
        offset = $(this).offset();
        h = $(this).height();
        w = $(this).width();
        $(".cont").html(str);
        $(".triangle-t").css('left',26);
        $btip.css({ "left":offset.left-330  ,  "top":offset.top+h-60  }).show();
    });


    $('#maxAmount').live("mousemove",function(){
        clearInterval(window.timer);
        $("#digitsTip").show();
    });

    $('#maxAmount').live("mouseout",function(){
        $("#digitsTip").hide();
    });
</script>
<script type="text/html" id="tplMoney">{{formatCurrency(d.amount)}}</script>
#end
